<template>
    <div :id="oscillogramContainer" style="width: 100%; height: 100%"></div>
  </template>
  
  <script>
  import {
    Themes,
    lightningChart,
    AxisTickStrategies,
    SolidFill,
    UIElementBuilders,
    UIOrigins,
    ColorHEX,
    SolidLine,
  } from "@arction/lcjs";
  
 // import { paramValueChanged } from "../../../api/test";
  export default {
    name: "oscillogramPage",
    components: {},
    data() {
      return {
        webSocketWaterFall: null,
        startX: 0,
        range: 200,
        sumPoint: 8000,
        oscillogramContainer:'',
      };
    },
    // created() {
    //   setInterval(() => {
    //     let param = {
    //       freq_count: 1999,
    //       ps_data: this.temp,
    //       spec_count: this.temp.length,
    //       spec_data: this.temp,
    //     };
    //     this.onReceiveKdSpec(param);
    //   }, 100);
    // },
    created () {
        this.oscillogramContainer = this.guid()
    },
    mounted() {
      this.initChart(this.oscillogramContainer);
    },
  
    methods: {
        //随机id
        guid() {
            return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                var r = Math.random() * 16 | 0,
                    v = c == 'x' ? r : (r & 0x3 | 0x8);
                return v.toString(16);
            });
        },

      initChart(id) {
        const chart = lightningChart()
        this.kdSpectrum = this.setupChart(
          {
            columnIndex: 0,
            columnSpan: 1,
            rowIndex: 1,
            rowSpan: 1,
            container: id,
            theme: Themes.darkTurquoise,
          },
          "波形图",
          "时间",
          "频率",
          [-140, 10]
        );
  
  
        // 设置初始显示区间
        // this.kdSpectrum.getDefaultAxisX().setInterval(0, 8000, false, true);
  
        this.kdSpectrum.getDefaultAxisY().setInterval(0, 200, false, true);
  
        //设置系列
        this.kdRealTimeSeries = this.setupSeries(
          this.kdSpectrum,
          "i路",
          "#00FF00",
          true
        );
        this.kdMaxSeries = this.setupSeries(
          this.kdSpectrum,
          "q路",
          "#FF0000",
          true
        );
  
        //设置提示框
        this.kdRealTimeSeries
          .setMouseInteractions(false)
          .setCursorInterpolationEnabled(false)
          .setCursorResultTableFormatter((tableBuilder, series, x, y) =>
            tableBuilder
              .addRow(series.getName())
              .addRow("时间", series.axisX.formatValue(x), "s")
              .addRow("频率", series.axisY.formatValue(y), "kHz")
          );
        const legend = this.kdSpectrum
          .addLegendBox()
          .setAutoDispose({
            type: "max-width",
            maxWidth: 0.3
          })
          .add(this.kdSpectrum)
      },
      
      //数据处理
      onReceiveKdSpec(avgData,maxData) {
        let xyData = [];
        let maxXyData=[];
        if(avgData.length == 0){
          this.kdRealTimeSeries.clear();
        }
        if(maxXyData.length == 0){
          this.kdMaxSeries.add(maxXyData);
        }
        if(avgData.length>0 && maxData.length > 0){
          for (let i = 0; i < avgData.length; i++) {
            xyData.push({ x: i, y: avgData[i] });
          }
          for (let i = 0; i < maxData.length; i++) {
            maxXyData.push({ x: i, y: maxData[i] });
          }
          this.addData(xyData, maxXyData);
        }
      },
      //数据添加
      addData(xyData, maxXyData) {
        if(xyData.length == 0 && maxXyData == 0){
          this.kdRealTimeSeries.clear();
          this.kdRealTimeSeries.add([]);
          this.kdMaxSeries.clear();
          this.kdMaxSeries.add([]);
        }else{
          this.kdRealTimeSeries.clear();
          this.kdRealTimeSeries.add(xyData);
          this.kdMaxSeries.clear();
          this.kdMaxSeries.add(maxXyData);
        }
        //console.log("gggggg")
      },
  
      setupSeries (chart, name, color = "#fff", useDataPattern = true) {
        const series = chart
          .addLineSeries({
            dataPattern: useDataPattern
              ? {
                  pattern: "ProgressiveX",
                  regularProgressiveStep: true,
                  allowDataGrouping: true,
                }
              : undefined,
          })
          .setStrokeStyle((style) =>
            style.setFillStyle((fill) => fill.setColor(ColorHEX(color)))
          )
          .setName(name)
          .setCursorInterpolationEnabled(false)
        return series
      },
  
      // 设置图表
      setupChart (options, title, xAxisTitle, yAxisTitle, yInterval) {
        const chart = lightningChart()
          .ChartXY({
            ...options
          })
          .setTitle(title)
          .setMouseInteractions(false)
          .setPadding({ top: 2, left: 1, right: 6, bottom: 2 })
          .setTitleMarginTop(1)
  
        chart
          .getDefaultAxisX()
          .setTitle(xAxisTitle)
          .setTitleFont((f) => f.setSize(13))
          .setMouseInteractions(false)
          .setTitleMargin(-5)
  
        chart
          .getDefaultAxisY()
          .setTitle(yAxisTitle)
          .setTitleFont((f) => f.setSize(13))
          .setTitleMargin(0)
          .setMouseInteractions(false)
          .setTickStrategy(AxisTickStrategies.Numeric, (tickStrategy) =>
            tickStrategy.setMajorTickStyle((tickStyle) =>
              tickStyle.setLabelFont((f) => f.setSize(12))
            )
          )
  
        // 鼠标移入颜色与线颜色一致
        chart.setAutoCursor((cursor) =>
          cursor
            .setResultTableAutoTextStyle(true)
            .disposeTickMarkerX()
            .disposeTickMarkerY()
            .setTickMarkerYAutoTextStyle(true)
        )
        return chart
      }
    }
  }
  </script>
  